<template>
  <div id="app">
    <!--为echarts准备一个具备大小的容器dom-->
    <div id="main" style="width: 1200px; height: 550px"></div>
    <div style="background-position: right">
      <label>选择策略组:</label>
      <select v-model="selectStrategyGroupId" @change="onSeriesChange">
        <option value="">全部</option>
        <option v-for="(strategyGroup, index) in strategyGroupList" :key="index" :value="strategyGroup.id">
          {{ strategyGroup.name }}
        </option>
      </select>
    </div>
  </div>
</template>
<script>
// import echarts from 'echarts'
import * as echarts from 'echarts'
import {winRateStatistics} from "@/api/business/record";

export default {
  name: '',
  data() {
    return {
      charts: '',
      selectStrategyGroupId: '',// 用于存储当前选中的系列名称
      strategyGroupList: [], // 存储所有系列的选项
      // opinionData: [['2000-06-05', 116], ['2000-06-06', 129], ['2000-06-07', 135], ['2000-06-08', 86], ['2000-06-09', 73], ['2000-06-10', 85], ['2000-06-11', 73], ['2014-06-17', 104], ['2014-06-18', 116], ['2014-06-19', 116], ['2014-06-20', 84], ['2014-06-21', 96], ['2014-06-22', 91], ['2014-06-23', 115], ['2014-06-24', 161], ['2014-06-25', 138], ['2014-06-26', 163], ['2014-06-27', 68], ['2014-06-28', 77], ['2014-06-29', 161], ['2014-06-30', 185], ['2014-07-01', 172], ['2014-07-02', 80], ['2014-07-03', 248], ['2014-07-04', 237], ['2014-07-05', 165], ['2014-07-06', 256], ['2014-07-07', 216], ['2014-07-08', 134], ['2014-07-09', 63], ['2014-07-10', 114], ['2014-07-11', 77], ['2014-07-12', 80], ['2014-07-13', 64], ['2014-07-14', 156], ['2014-07-15', 140], ['2014-07-16', 133], ['2014-07-17', 186], ['2014-07-18', 182], ['2014-07-19', 106], ['2014-07-20', 119], ['2014-07-21', 68], ['2014-07-22', 54], ['2014-07-23', 82], ['2014-07-24', 90], ['2014-07-25', 134], ['2014-07-26', 188], ['2014-07-27', 194], ['2014-07-28', 159], ['2014-07-29', 159], ['2014-07-30', 169], ['2014-07-31', 244], ['2014-08-01', 199], ['2014-08-02', 163], ['2014-08-03', 149], ['2014-08-05', 80], ['2014-08-06', 67], ['2014-08-07', 162], ['2014-08-08', 140], ['2014-08-09', 143], ['2014-08-10', 125], ['2014-08-11', 76], ['2014-08-12', 119], ['2014-08-13', 70], ['2014-08-14', 104], ['2014-08-15', 109], ['2014-08-16', 159], ['2014-08-17', 124], ['2014-08-18', 135], ['2014-08-19', 150], ['2014-08-20', 164], ['2014-08-21', 169], ['2014-08-22', 83], ['2014-08-23', 155], ['2014-08-24', 75], ['2014-08-25', 59], ['2014-08-26', 78], ['2014-08-27', 136], ['2014-08-28', 103], ['2014-08-29', 104], ['2014-08-30', 176], ['2014-08-31', 89], ['2014-09-01', 127], ['2014-09-03', 54], ['2014-09-04', 100], ['2014-09-05', 140], ['2014-09-06', 186], ['2014-09-07', 200], ['2014-09-08', 61], ['2014-09-09', 109], ['2014-09-10', 111], ['2014-09-11', 114], ['2014-09-12', 97], ['2014-09-13', 94], ['2014-09-14', 66], ['2014-09-15', 54], ['2014-09-16', 87], ['2014-09-17', 80], ['2014-09-18', 84], ['2014-09-19', 117], ['2014-09-20', 168], ['2014-09-21', 129], ['2014-09-22', 127], ['2014-09-23', 64], ['2014-09-24', 60], ['2014-09-25', 144], ['2014-09-26', 170], ['2014-09-27', 58], ['2014-09-28', 87], ['2014-09-29', 70], ['2014-09-30', 53], ['2014-10-01', 92], ['2014-10-02', 78], ['2014-10-03', 123], ['2014-10-04', 95], ['2014-10-05', 54], ['2014-10-06', 68], ['2014-10-07', 200], ['2014-10-08', 314], ['2014-10-09', 379], ['2014-10-10', 346], ['2014-10-11', 233], ['2014-10-14', 80], ['2014-10-15', 73], ['2014-10-16', 76], ['2014-10-17', 132], ['2014-10-18', 211], ['2014-10-19', 289], ['2014-10-20', 250], ['2014-10-21', 82], ['2014-10-22', 99], ['2014-10-23', 163], ['2014-10-24', 267], ['2014-10-25', 353], ['2014-10-26', 78], ['2014-10-27', 72], ['2014-10-28', 88], ['2014-10-29', 140], ['2014-10-30', 206], ['2014-10-31', 204], ['2014-11-01', 65], ['2014-11-03', 59], ['2014-11-04', 150], ['2014-11-05', 79], ['2014-11-07', 63], ['2014-11-08', 93], ['2014-11-09', 80], ['2014-11-10', 95], ['2014-11-11', 59], ['2014-11-13', 65], ['2014-11-14', 77], ['2014-11-15', 143], ['2014-11-16', 98], ['2014-11-17', 64], ['2014-11-18', 93], ['2014-11-19', 282], ['2014-11-23', 155], ['2014-11-24', 94], ['2014-11-25', 196], ['2014-11-26', 293], ['2014-11-27', 83], ['2014-11-28', 114], ['2014-11-29', 276], ['2014-12-01', 54], ['2014-12-02', 65], ['2014-12-03', 51], ['2014-12-05', 62], ['2014-12-06', 89], ['2014-12-07', 65], ['2014-12-08', 82], ['2014-12-09', 276], ['2014-12-10', 153], ['2014-12-11', 52], ['2014-12-13', 69], ['2014-12-14', 113], ['2014-12-15', 82], ['2014-12-17', 99], ['2014-12-19', 53], ['2014-12-22', 103], ['2014-12-23', 100], ['2014-12-25', 73], ['2014-12-26', 155], ['2014-12-27', 243], ['2014-12-28', 155], ['2014-12-29', 125], ['2014-12-30', 65], ['2015-01-01', 65], ['2015-01-02', 79], ['2015-01-03', 200], ['2015-01-04', 226], ['2015-01-05', 122], ['2015-01-06', 60], ['2015-01-07', 85], ['2015-01-08', 190], ['2015-01-09', 105], ['2015-01-10', 208], ['2015-01-11', 59], ['2015-01-12', 160], ['2015-01-13', 211], ['2015-01-14', 265], ['2015-01-15', 386], ['2015-01-16', 118], ['2015-01-17', 89], ['2015-01-18', 94], ['2015-01-19', 77], ['2015-01-20', 113], ['2015-01-22', 143], ['2015-01-23', 257], ['2015-01-24', 117], ['2015-01-25', 185], ['2015-01-26', 119], ['2015-01-28', 65], ['2015-01-29', 87], ['2015-01-31', 60], ['2015-02-01', 108], ['2015-02-02', 188], ['2015-02-03', 143], ['2015-02-05', 62], ['2015-02-06', 100], ['2015-02-09', 152], ['2015-02-10', 166], ['2015-02-11', 55], ['2015-02-12', 59], ['2015-02-13', 175], ['2015-02-14', 293], ['2015-02-15', 326], ['2015-02-16', 153], ['2015-02-18', 73], ['2015-02-19', 267], ['2015-02-20', 183], ['2015-02-21', 394], ['2015-02-22', 158], ['2015-02-23', 86], ['2015-02-24', 207]]
      opinionData: [],
      option: ''

    }
  },
  methods: {

    async getWinRateStatistics() {
      await winRateStatistics("PROFIT_RATE").then(response => {
        console.log("response", response)
        this.opinionData = response
        this.strategyGroupList=response.strategyGroupList
      });
      this.drawLine('main')
    },

    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id))
      this.option = {
        title: {
          text: '赢利率 %'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.opinionData.legend
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.opinionData.xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: this.opinionData.seriesDTOList
      }
      this.charts.setOption(this.option)
    },

    updateChart() {
      debugger
      // 根据selectedSeries筛选series
      let updateOption = this.charts.getOption();
      updateOption.series = this.selectStrategyGroupId
        ? this.option.series.filter(series => series.strategyGroupId == this.selectStrategyGroupId)
        : this.option.series;
      console.log("this.option",this.option)
      this.charts.setOption(updateOption,true);
    },
    onSeriesChange() {
      this.updateChart();
    }
  },

  // 调用
  mounted() {
    this.$nextTick(function () {
      this.getWinRateStatistics()
      // this.drawLine('main')
    })
  }
}
</script>
<style scoped>
</style>
